<template lang="">
    <div>
        <el-dialog v-model="store.state.perssion.dialogFromVisible" title="编辑信息">
            <el-form :model="store.state.perssion.editFrom">
                <el-form-item label="ID" :label-width="formLabelWidth">
                    <el-input v-model="store.state.perssion.editFrom.id" autocomplete="off" disabled />
                </el-form-item>
                <el-form-item label="用户" :label-width="formLabelWidth">
                    <el-input v-model="store.state.perssion.editFrom.username" autocomplete="off" disabled />
                </el-form-item>
                <el-form-item label="权限" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="checkbox" size="small">
                        <el-checkbox label="成员变更" size="large" border :key="Math.random()" />
                        <el-checkbox label="用户权限管理" size="large" border :key="Math.random()" />
                        <el-checkbox label="住户信息修改" size="large" border :key="Math.random()" />
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handlecancel">取消</el-button>
                    <el-button type="primary" @click="handelsubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
    import { ref,reactive,onMounted,watch,defineEmits } from "vue";
    import { useStore } from "vuex";
    import { ElMessage,ElMessageBox } from "element-plus";
    import link from '../api/link.js'

    const store = useStore()
    const formLabelWidth = '140px'

    // 复选框组
    const checkbox = ref([])

    // 父组件重新获取信息
    const emit = defineEmits(['reGetList'])

    // 监听编辑框显示状态
    watch(
        () => store.state.perssion.dialogFromVisible,
        () => {
            checkbox.value = store.state.perssion.editFrom.power[0] == '所有权限' ? ['成员变更','用户权限管理','住户信息修改'] : store.state.perssion.editFrom.power
        }
    )

    // 修改
    const handelsubmit = () => {
        let arr:any = []
        if (checkbox.value.length == 3) {
            arr = ['所有权限']
        }else{
            for(let item in checkbox.value){
                console.log(checkbox.value[item]);
                arr.push(checkbox.value[item])
            }
        }
        store.commit('editPerData',arr)

        link(`/register/${store.state.perssion.editFrom.id}`, 'put', store.state.perssion.editFrom).then(res => {
            if (res.status === 200) {
                ElMessage({
                    type:'success',
                    message:'修改成功'
                })
                emit('reGetList')
            }else{
                ElMessage({
                    type:'error',
                    message:'修改失败'
                })
            }
            store.commit('changePerDialog')
        })
    }

    // 取消修改
    const handlecancel = () => {
        store.commit('changePerDialog')
        ElMessage({
            type:'info',
            message:'已取消'
        })
    }
</script>
<style lang="scss" scoped>
    .el-button--text {
        margin-right: 15px;
    }

    .el-select {
        width: 300px;
    }

    .el-input {
        width: 300px;
    }

    .dialog-footer button:first-child {
        margin-right: 10px;
    }

    .el-checkbox {
        margin: 10px;
    }
</style>